import { Component, OnInit, AfterViewInit, ViewChild, TemplateRef, Renderer2 } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular';

declare let $;

@Component({
    selector: 'app-dg-rtpl',
    templateUrl: './index.html',
    styleUrls: ['./inex.scss']
})
export class DataGridRowTplComponent implements OnInit, AfterViewInit {
    employees = EMPLOYEES;
    @ViewChild('tt')
    dataTemplate: any;

    @ViewChild('labelTemplate')
    labelTemplate: TemplateRef<any>;

    @ViewChild('grid')
    drid: DxDataGridComponent;

    constructor(private _render: Renderer2) {

    }

    ngOnInit() {
        console.log('--------ngOnInit');
    }

    ngAfterViewInit() {
        console.log('--------ngAfterViewInit dataTemplate', this.dataTemplate);
        console.log('--------ngAfterViewInit drid', this.drid);
    }

    onRowPrepared() {
        console.log('--------onRowPrepared');
    }

    onCellPrepared(e: any) {
        console.log('--------onCellPrepared');
    }

    rowTemplateFn(rowElement: any, rowInfo: any) {
        console.log('--------rowTemplateFn', rowElement, rowInfo);


        if (!!rowInfo.data.ParentId) {
            return $(
                `<tbody>
            <tr class="dx-row dx-data-row dx-row-lines dx-column-lines">
                <td colspan="6" role="gridcell">
                    <button (onClick)="expandDataRows($event)">data</button>
                    <div>${rowInfo.data.ParentId}--${rowInfo.data.ID}</div>
                </td>
            </tr>
        </tbody>`)[0];
        }

        // return $(
        // `<tbody class="rowInfo" *dxTemplate="let rowInfo of 'rowTemplateName'">
        //     <tr class="dx-data-row dx-row-lines dx-column-lines" role="row">
        //         <td>${rowInfo.data.ID}</td>
        //         <td>${rowInfo.data.FirstName}</td>
        //         <td>${rowInfo.data.LastName}</td>
        //         <td>${rowInfo.data.Position}</td>
        //         <td>${rowInfo.data.BirthDate}</td>
        //         <td>${rowInfo.data.HireDate}</td>
        //     </tr>
        //     <tr class="dx-row dx-data-row dx-row-lines dx-column-lines">
        //         <td colspan="6" role="gridcell">
        //             <div>${rowInfo.data.Notes}</div>
        //         </td>
        //     </tr>
        // </tbody>`)[0];

        console.log('---');
    }

    expandDataRows(data: Employee) {
        console.log('---expandDataRows');
        (data as any).childs = this.employees.filter(v => v.ParentId === data.ID);
    }
}

export class Employee {
    ID: string;
    FirstName: string;
    LastName: string;
    Prefix: string;
    Position: string;
    Picture: string;
    BirthDate: string;
    HireDate: string;
    Notes: string;
    Address: string;
    ParentId?: string;
    Type: number;
}

const EMPLOYEES: Employee[] = [{
    'ID': '1',
    'FirstName': 'John',
    'LastName': 'Heart',
    'Prefix': 'Mr.',
    'Position': 'CEO',
    'Picture': 'images/employees/01.png',
    'BirthDate': '1964/03/16',
    'HireDate': '1995/01/15',
    // tslint:disable-next-line:max-line-length
    'Notes': 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
    'Address': '351 S Hill St.',
    'Type': 0,
}, {
    'ID': '1-2',
    'FirstName': 'Olivia',
    'LastName': 'Peyton',
    'Prefix': 'Mrs.',
    'Position': 'Sales Assistant',
    'Picture': 'images/employees/09.png',
    'BirthDate': '1981/06/03',
    'HireDate': '2012/05/14',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Olivia loves to sell. She has been selling DevAV products since 2012.  Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
    'Address': '807 W Paseo Del Mar',
    'ParentId': '1',
    'Type': 1
}, {
    'ID': '1-3',
    'FirstName': 'Robert',
    'LastName': 'Reagan',
    'Prefix': 'Mr.',
    'Position': 'CMO',
    'Picture': 'images/employees/03.png',
    'BirthDate': '1974/09/07',
    'HireDate': '2002/11/08',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
    'Address': '4 Westmoreland Pl.',
    'ParentId': '1',
    'Type': 1
}, {
    'ID': '1-3-1',
    'FirstName': 'Robert',
    'LastName': 'Reagan',
    'Prefix': 'Mr.',
    'Position': 'CMO',
    'Picture': 'images/employees/03.png',
    'BirthDate': '1974/09/07',
    'HireDate': '2002/11/08',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
    'Address': '4 Westmoreland Pl.',
    'ParentId': '1-3',
    'Type': 2
}, {
    'ID': '4',
    'FirstName': 'Greta',
    'LastName': 'Sims',
    'Prefix': 'Ms.',
    'Position': 'HR Manager',
    'Picture': 'images/employees/04.png',
    'BirthDate': '1977/11/22',
    'HireDate': '1998/04/23',
    // tslint:disable-next-line:max-line-length
    'Notes': `Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp. Greta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.`,
    'Address': '1700 S Grandview Dr.',
    'Type': 0
}, {
    'ID': '4-5',
    'FirstName': 'Brett',
    'LastName': 'Wade',
    'Prefix': 'Mr.',
    'Position': 'IT Manager',
    'Picture': 'images/employees/05.png',
    'BirthDate': '1968/12/01',
    'HireDate': '2009/03/06',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Brett came to DevAv from Microsoft and has led our IT department since 2012. When he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
    'Address': '1120 Old Mill Rd.',
    'ParentId': '4',
    'Type': 1
}, {
    'ID': '4-6',
    'FirstName': 'Sandra',
    'LastName': 'Johnson',
    'Prefix': 'Mrs.',
    'Position': 'Controller',
    'Picture': 'images/employees/06.png',
    'BirthDate': '1974/11/15',
    'HireDate': '2005/05/11',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you\'ve not met her, be certain to say hi. Sandra has 2 daughters both of whom are accomplished gymnasts.',
    'Address': '4600 N Virginia Rd.',
    'ParentId': '4',
    'Type': 1
}, {
    'ID': '7',
    'FirstName': 'Kevin',
    'LastName': 'Carter',
    'Prefix': 'Mr.',
    'Position': 'Shipping Manager',
    'Picture': 'images/employees/07.png',
    'BirthDate': '1978/01/09',
    'HireDate': '2009/08/11',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games.',
    'Address': '424 N Main St.',
    'Type': 0
}, {
    'ID': '7-8',
    'FirstName': 'Cynthia',
    'LastName': 'Stanwick',
    'Prefix': 'Ms.',
    'Position': 'HR Assistant',
    'Picture': 'images/employees/08.png',
    'BirthDate': '1985/06/05',
    'HireDate': '2008/03/24',
    // tslint:disable-next-line:max-line-length
    'Notes': 'Cindy joined us in 2008 and has been in the HR department for 2 years.  She was recently awarded employee of the month. Way to go Cindy!',
    'Address': '2211 Bonita Dr.',
    'ParentId': '7',
    'Type': 1
}, {
    'ID': '7-9',
    'FirstName': 'Kent',
    'LastName': 'Samuelson',
    'Prefix': 'Dr.',
    'Position': 'Ombudsman',
    'Picture': 'images/employees/02.png',
    'BirthDate': '1972/09/11',
    'HireDate': '2009/04/22',
    // tslint:disable-next-line:max-line-length
    'Notes': 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.',
    'Address': '12100 Mora Dr',
    'ParentId': '7',
    'Type': 1
}];
